<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueDemo3</title>
    <style type="text/css">
        /**{margin: 20px;padding: 20px;}*/
        .changecolor{
            color: red;
        }
        .changecolor2{
            color: blue;
        }
    </style>
</head>
<body>
<div id="app">
        <span v-for="(e,i) in info">
            {{e.name}}--<span class="changecolor">原手机号</span>--{{e.phone}}&nbsp;&nbsp;&nbsp;&nbsp;
            {{e.name}}--<span class="changecolor2">隔三行加逗号</span>--{{e.phone|zhe(3)}}<br/><br/><br/><br/>
        </span>
</div>
<script src="js/vue.min.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            info:[{"name":"薛斌斌","phone":"15209212888"},
                {"name":"吴锋","phone":"15209212888"},
                {"name":"李家豪","phone":"15209212888"},
                {"name":"薛文斌","phone":"15209212888"}]
        },
        filters:{
            zhe:function(e,arg){
                var e = (e || 0).toString(), result = '';
                while (e.length > 3) {
                    result = ',' + e.slice(-3) + result;
                    e = e.slice(0, e.length - 3);
                }
                if (e) { result = e + result; }
                return result;
            }
        }
    })
</script>
</body>
</html>